<link type="text/css" rel="stylesheet" href="../addons/scene_cube/style/css/wanimation.css" />
<script type="text/javascript">
  function testAnim(x) {
    $('#drag').removeClass().addClass(x + ' animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
		$(this).removeClass();
    });
  };
        $(document).ready(function () {
            $('#animations').change(function(){
            var anim = $(this).val();
            testAnim(anim);
            });
            var _move = false; 
            var _x, _y;
            var index_x, index_y;
            $("#drag").css({ top: {if ($item['y'])}{php echo $item['y']/2}{else}0{/if}, left: {if ($item['x'])}{php echo $item['x']/2}{else}0{/if} });
            $("#drag").bind("mousedown", downIndex); 
            $(document).bind("mousemove", mmove);
            $(document).bind("mouseup", mup);
            function mmove(e) {
                if (_move) {
                    var x = e.pageX - _x; 
                    var y = e.pageY - _y;
                    $("#drag").css({ top: y, left: x }); 
                    show(x, y);
                }
            }
            function mup() {
                _move = false;
            }
            function downIndex(e) {
                _move = true;
                _x = e.pageX - parseInt($("#drag").css("left"));
                _y = e.pageY - parseInt($("#drag").css("top"));
 
            }
            function show(x, y) {
                $("#x").val(2*x);
                $("#y").val(2*y);
            }
        });
</script>
<form action="" method="post" enctype="multipart/form-data">
			<div id="image-container" style="overflow:hidden;">
				<div style="width:250px;float:left;">
				<input type="hidden" value="0" name="style">
				{if !empty($id)}<input type="hidden" value="{$id}" name="id">{/if}
				{if !empty($photoid)}<input type="hidden" value="{$photoid}" name="photoid">{/if}
				<span class="help-block">请上传图片，一般为背景透明的图片</span>
				<div style="display:block; margin-top:5px;" class="input-append">
				<input type="text" value="{$item['item']}" name="item" id="upload-image-url-item" class="span2">
				<input type="hidden" value="" name="item_old" id="upload-image-url-item-old">
				<button class="btn" type="button" id="upload-image-item">选择图片</button>
				</div>
				<span class="help-block">请填写元素链接的网址，可以不填</span>
				<input id="url" type="text" value="{$item['url']}" name="url" class="span3">
				<div class="alert-block" style="padding:0 0;">
					<a href="javascript:;" class="icon-external-link" onclick="$('#modal-tel').modal();">拨号</a>&nbsp;
					<a href="javascript:;" class="icon-external-link" onclick="$('#modal-vod').modal();">视频</a>&nbsp;
					<a href="javascript:;" class="icon-external-link" onclick="$('#modal-nav').modal();bmap.init({});">地图</a>&nbsp;
					<a href="javascript:;" class="icon-external-link" onclick="$('#modal-res').modal();">表单</a>&nbsp;
					<a href="javascript:;" class="icon-external-link" onclick="$('#url').val('#share');">分享</a>
				</div>
				<input type="hidden" value="" name="x" id="x">
				<input type="hidden" value="" name="y" id="y">
				<span class="help-block">请选择元素的动画特效</span>
				<select name="animation" id="animations" class="input span3">
        					<optgroup label="基本特效">
          					<option value="flash" {if ($item['animation']=='flash')}selected="selected"{/if}>闪光</option>
          					<option value="bounce" {if ($item['animation']=='bounce')}selected="selected"{/if}>弹起</option>
          					<option value="shake" {if ($item['animation']=='shake')}selected="selected"{/if}>摇摆</option>
          					<option value="tada" {if ($item['animation']=='tada')}selected="selected"{/if}>秋千</option>
          					<option value="swing" {if ($item['animation']=='swing')}selected="selected"{/if}>悬挂</option>
          					<option value="wobble" {if ($item['animation']=='wobble')}selected="selected"{/if}>摆动</option>
          					<option value="pulse" {if ($item['animation']=='pulse')}selected="selected"{/if}>脉冲</option>
					</optgroup>
        					<optgroup label="翻转特效">
          					<option value="flipx" {if ($item['animation']=='flipx')}selected="selected"{/if}>垂直翻转</option>
          					<option value="flipy" {if ($item['animation']=='flipy')}selected="selected"{/if}>水平翻转</option>
					</optgroup>
        					<optgroup label="淡入特效">
          					<option value="fadedown" {if ($item['animation']=='fadedown')}selected="selected"{/if}>上方淡入</option>
          					<option value="fadeup" {if ($item['animation']=='fadeup')}selected="selected"{/if}>下方淡入</option>
          					<option value="fadeleft" {if ($item['animation']=='fadeleft')}selected="selected"{/if}>左方淡入</option>
          					<option value="faderight" {if ($item['animation']=='faderight')}selected="selected"{/if}>右方淡入</option>
          					<option value="fadedownbig" {if ($item['animation']=='fadedownbig')}selected="selected"{/if}>顶部淡入</option>
          					<option value="fadeupbig" {if ($item['animation']=='fadeupbig')}selected="selected"{/if}>底部淡入</option>
          					<option value="fadeleftbig" {if ($item['animation']=='fadeleftbig')}selected="selected"{/if}>左侧淡入</option>
          					<option value="faderightbig" {if ($item['animation']=='faderightbig')}selected="selected"{/if}>右侧淡入</option>
					</optgroup>
        					<optgroup label="跳弹特效">
          					<option value="bouncein" {if ($item['animation']=='bouncein')}selected="selected"{/if}>跳弹放大</option>
          					<option value="bouncedown" {if ($item['animation']=='bouncedown')}selected="selected"{/if}>跳弹降落</option>
          					<option value="bounceup" {if ($item['animation']=='bounceup')}selected="selected"{/if}>跳弹升起</option>
          					<option value="bounceleft" {if ($item['animation']=='bounceleft')}selected="selected"{/if}>左侧跳弹</option>
          					<option value="bounceright" {if ($item['animation']=='bounceright')}selected="selected"{/if}>右侧跳弹</option>
					</optgroup>
        					<optgroup label="旋转特效">
          					<option value="rotatein" {if ($item['animation']=='rotatein')}selected="selected"{/if}>旋转淡入</option>
          					<option value="rotateindownleft" {if ($item['animation']=='rotateindownleft')}selected="selected"{/if}>左下旋转</option>
          					<option value="rotateindownright" {if ($item['animation']=='rotateindownright')}selected="selected"{/if}>右下旋转</option>
          					<option value="rotateinupleft" {if ($item['animation']=='rotateinupleft')}selected="selected"{/if}>左上旋转</option>
          					<option value="rotateinupright" {if ($item['animation']=='rotateinupright')}selected="selected"{/if}>左下旋转</option>
					</optgroup>
        					<optgroup label="其他特效">
          					<option value="rollin" {if ($item['animation']=='rollin')}selected="selected"{/if}>翻滚进入</option>
          					<option value="zoomindown" {if ($item['animation']=='zoomindown')}selected="selected"{/if}>顶部砸入</option>
          					<option value="lightspeedin" {if ($item['animation']=='lightspeedin')}selected="selected"{/if}>摇摆进入</option>
					</optgroup>
				</select>
				</div>
				<div id="upload-image-preview-piece" style="width:320px;height:504px;background:url({$_W['attachurl']}{$photo['attachment']}) no-repeat;background-size:320px 504px;float:left;">
				{if $item['item']}
					{php $size = GetImageSize($_W['attachurl'].$item['item']);}
					<img class="upload-image-preview-item" id="drag" style="width:{php echo $size[0]/2}px;height:{php echo $size[1]/2}px;cursor: move;position: relative;left:0;top: 0;" src="{$_W['attachurl']}{$item['item']}" />
				{else}
					<img class="upload-image-preview-item" id="drag" style="cursor: move;position: relative;left:0;top: 0;" src="../addons/scene_cube/resource/images/module-nopic-small.jpg" />
				{/if}
				</div>
				<div>
					<button type="button" class="btn btn-primary span3" name="submit" value="确定" id="ok" data-dismiss="modal">确定</button>
					<input type="hidden" name="token" value="{$_W['token']}" />
				</div>
				</form>
				<script type="text/javascript">
				/*var editor = KindEditor.editor({
					allowFileManager : true,
					uploadJson : "./index.php?act=attachment&do=upload",
					fileManagerJson : "./index.php?act=attachment&do=manager",
					afterUpload : function(url, data) {
						
					}
				});
				$("#upload-image-item").click(function() {
					editor.loadPlugin("image", function() {
						editor.plugin.imageDialog({
							tabIndex : 1,
							imageUrl : $("#upload-image-url-item").val(),
							clickFn : function(url) {
								editor.hideDialog();
								var val = url;
								if(url.toLowerCase().indexOf("http://") == -1 && url.toLowerCase().indexOf("https://") == -1) {
									var filename = /images(.*)/.exec(url);
									if(filename && filename[0]) {
										val = filename[0];
									}
								}
								$("#upload-image-url-item-old").val($("#upload-image-url-item").val());
								$("#upload-image-url-item").val(val);
								$(".upload-image-preview-item").css("width","");
								$(".upload-image-preview-item").css("height","");
								$(".upload-image-preview-item").attr("src",url);
								$(".upload-image-preview-item").css("-webkit-transform-origin","0 0");
								$(".upload-image-preview-item").css("-webkit-transform","scale(0.5,0.5)");
							}
						});
					});
				});*/
				$("#ok").click(function(){
					
				});
				$(function () {
					//
					$("#upload-image-preview-piece").attr("style","width:320px;height:504px;background:url("+$("#firstimg_image_uploads img").attr('src')+") no-repeat;background-size:320px 504px;float:left;");
					 
				});
				</script>
			</div>
